﻿@namespace BlazorFluentUI
@inherits FluentUIComponentBase

<div class=@($"bf-richTextEditor {this.ClassName}{(Disabled ? " is-disabled" : "")}")
     style=@Style>
    @if (!ReadOnly)
    {
        <CommandBar Items=@items ClassName="bf-richTextEditor-commandBar" />
    }
    <div @ref=@RootElementReference
         @onkeydown=@InterceptKeyPressAsync
         @onfocusin=@OnFocusAsync
         @onfocusout=@OnBlurAsync
         class="bf-richTextEditor-editor">
    </div>
</div>

<Dialog IsOpen=@isImageDialogOpen
        Title="Insert Image"
        FirstFocusableSelector="firstFocus"
        ForceFocusInsideTrap="true"
        OnDismiss=@(args => isImageDialogOpen=false)>
    <ChildContent>
        <Stack>
            <TextField ClassName="firstFocus" Label="Image Link" @bind-Value=@imageUrl @bind-Value:event="OnInput" />
            <TextField Label="Image Alternate Text" @bind-Value=@imageAlt @bind-Value:event="OnInput" />
            <Stack Horizontal="true">
                <TextField Label="Horizontal Size" Placeholder="auto" Description="auto if empty" @bind-Value=@imageWidth @bind-Value:event="OnInput" />
                <TextField Label="Vertical Size" Placeholder="auto" Description="auto if empty" @bind-Value=@imageHeight @bind-Value:event="OnInput" />
            </Stack>
        </Stack>
    </ChildContent>
    <FooterTemplate>
        <DefaultButton Text="Cancel" OnClick=@(args=> isImageDialogOpen=false) />
        <PrimaryButton Text="Insert" OnClick=@(args=> InsertImageAsync()) />
    </FooterTemplate>
</Dialog>